<template>
  <div class="shop-manage">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="店铺名称">
        <el-input
          v-model.trim="formInline.shopName"
          placeholder="输入店铺名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺ID">
        <el-input
          v-model.trim="formInline.shopId"
          placeholder="输入店铺ID"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
          v-model.trim="formInline.address"
          placeholder="输入店铺地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model.trim="formInline.bossPhone"
          placeholder="输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.status" placeholder="审核状态">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="待审核" :value="1"></el-option>
          <el-option label="审核通过" :value="2"></el-option>
          <el-option label="驳回" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchShops"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width: 100%">
      <el-table-column prop="id" label="店铺ID" width="80"> </el-table-column>
      <el-table-column prop="shopName" label="店铺名称" width="180">
      </el-table-column>
      <el-table-column prop="openStatus" label="店铺状态" width="180">
        <template slot-scope="{ row }">
          {{ row.openStatus ? "开店" : "关店" }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="店铺地址" width="180">
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="{ row }">
          <span v-if="row.typeId"
            >{{ row.typeName }}/{{ row.parentTypeName }}</span
          >
          <span v-else>服务</span>
        </template>
      </el-table-column>
      <el-table-column prop="bossName" label="申请人名称"> </el-table-column>
      <el-table-column prop="bossPhone" label="手机号"> </el-table-column>
      <el-table-column prop="description" label="店铺说明"> </el-table-column>
      <el-table-column prop="createTime" label="申请时间"> </el-table-column>
      <el-table-column prop="status" label="审核状态">
        <template slot-scope="scope">
          <el-tag
            type="info"
            effect="dark"
            v-if="scope.row.status === 1"
            size="mini"
            >待审核</el-tag
          >
          <el-tag
            type="success"
            effect="dark"
            v-if="scope.row.status === 2"
            size="mini"
            >通过</el-tag
          >
          <el-popover
            v-if="scope.row.status === 3"
            placement="top-start"
            title="驳回理由"
            width="200"
            trigger="hover"
            :content="scope.row.auditReason"
          >
            <el-tag type="danger" slot="reference">驳回</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="自由提现" width="80">
        <template slot-scope="{ row }">
          {{ row.freeDrawback ? "开启" : "关闭" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="{ row }">
          <div>
            <el-button
              @click="showAudit(row)"
              type="text"
              size="small"
              v-if="row.status === 1"
              >审核</el-button
            >
          </div>
          <div>
            <el-button @click="toggleDrawback(row)" type="text" size="small">{{
              row.freeDrawback ? "关闭提现" : "开启提现"
            }}</el-button>
          </div>
          <div>
            <el-button
              @click="toggleOpenStatus(row)"
              type="text"
              size="small"
              >{{ row.openStatus ? "关闭店铺" : "开启店铺" }}</el-button
            >
          </div>
          <div>
            <el-button @click="showQRCode(row)" type="text" size="small"
              >店铺二维码</el-button
            >
          </div>
          <div>
            <el-button @click="showMaxGoodsNumber(row)" type="text" size="small"
              >修改店铺参数</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :page-size="payload.pageSize"
      @current-change="onPageChange"
      :total="payload.total"
    >
    </el-pagination>
    <shop-info :info="currentShopInfo" ref="shopInfo" @onClose="searchShops" />
    <shop-qrcode :shopInfo="currentShopInfo" ref="shopQRCode"></shop-qrcode>
    <edit-shop :info="currentShopInfo" ref="editShop" @onClose="searchShops" />
  </div>
</template>

<script>
import ShopInfo from '@/components/ShopInfo'
import ShopQRCode from '@/components/ShopQRCode'
import EditShop from '@/components/EditShop'

export default {
  name: 'ShopManage',
  components: { ShopInfo, 'shop-qrcode': ShopQRCode, EditShop },
  data () {
    return {
      loading: true,
      formInline: {
        shopName: '',
        shopId: '',
        bossName: '',
        address: '',
        status: 0
      },
      payload: {
        current: 1,
        pageSize: 10,
        total: 10
      },
      list: [],
      currentShopInfo: {}
    }
  },
  methods: {
    searchShops () {
      console.log('点击搜索')
      console.log(this.formInline)
      this.payload.current = 1
      this.getShopList()
    },
    getShopList () {
      this.loading = true
      let query = {}
      let { shopName, bossPhone, address, shopId } = this.formInline
      if (shopName) query.title = shopName
      if (bossPhone) query.bossPhone = bossPhone
      if (address) query.address = address
      if (shopId) query.shopId = shopId
      if (this.formInline.status) query.status = this.formInline.status
      this.$http
        .post(
          `http://${
            process.env.NODE_ENV === 'development'
              ? 'localhost:9009'
              : 'qiucc.com'
          }/rentmall/shop/list`,
          {
            query,
            form: {},
            pagination: {
              current: this.payload.current,
              pageSize: this.payload.pageSize
            }
          }
        )
        .then(res => {
          console.log('获取数据成功')
          console.log(res)
          if (res.body.code === 200) {
            this.list = res.body.body
            this.payload.total = res.body.pagination.total
          } else {
            this.$message({
              message: '获取数据失败',
              type: 'warning'
            })
          }
        })
        .catch(err => {
          console.error(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    onPageChange (current) {
      this.payload.current = current
      this.getShopList()
    },
    showAudit (rowData) {
      console.log('审核')
      console.log(rowData)
      console.log(this.$refs)
      this.currentShopInfo = rowData
      this.$refs.shopInfo.showShopDetail()
    },
    toggleDrawback (rowData) {
      this.$confirm(
        `此操作将${
          rowData.freeDrawback ? '关闭' : '开启'
        }用户自由提现, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          return this.$http.post(this.ApiUrls.updateShop, {
            form: {
              id: rowData.id,
              freeDrawback: rowData.freeDrawback ? 0 : 1
            }
          })
        })
        .then(res => {
          console.log('test res', res)
          if (res && res.body && res.body.code === 200) {
            rowData.freeDrawback = !rowData.freeDrawback
            this.$message({
              type: 'success',
              message: '成功!'
            })
          } else {
            this.$message.error('操作失败')
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    toggleOpenStatus (rowData) {
      this.$confirm(
        `此操作将${rowData.openStatus ? '关闭' : '开启'}店铺, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          return this.$http.post(this.ApiUrls.updateShop, {
            form: {
              id: rowData.id,
              openStatus: rowData.openStatus ? 0 : 1
            }
          })
        })
        .then(res => {
          console.log('test res', res)
          if (res && res.body && res.body.code === 200) {
            rowData.openStatus = !rowData.openStatus
            this.$message({
              type: 'success',
              message: '成功!'
            })
          } else {
            this.$message.error('操作失败')
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    showQRCode (row) {
      this.currentShopInfo = row
      this.$nextTick(() => {
        this.$refs.shopQRCode.handleShow()
      })
    },
    showMaxGoodsNumber (row) {
      this.currentShopInfo = row
      this.$nextTick(() => {
        this.$refs.editShop.show(row)
      })
    }
  },
  mounted () {
    this.getShopList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.col {
  display: flex;
  span {
    flex-shrink: 0;
    padding-right: 20px;
    line-height: 40px;
  }
}
.pagination {
  padding-top: 30px;
  margin-left: auto;
  display: table;
}
</style>
